<template>
  <view class="exam-card" @tap="goToDetail">
    <view class="exam-header">
      <view class="exam-title">{{ exam.title }}</view>
      <view class="exam-status" :class="statusClass">
        {{ exam.statusText }}
      </view>
    </view>
    
    <view class="exam-info">
      <view class="exam-desc">{{ exam.description }}</view>
      
      <view class="exam-meta">
        <view class="meta-item">
          <uni-icons type="time" size="16" color="#999"></uni-icons>
          <text>{{ exam.duration }}分钟</text>
        </view>
        <view class="meta-item">
          <uni-icons type="list" size="16" color="#999"></uni-icons>
          <text>{{ exam.questions }}道题</text>
        </view>
        <view class="meta-item">
          <uni-icons type="star" size="16" color="#999"></uni-icons>
          <text>{{ exam.totalScore }}分</text>
        </view>
      </view>
      
      <view class="exam-time" v-if="exam.startTime">
        <uni-icons type="calendar" size="16" color="#667eea"></uni-icons>
        <text>开始时间：{{ exam.startTime }}</text>
      </view>
      
      <view class="exam-deadline" v-if="exam.deadline">
        <uni-icons type="clock" size="16" color="#ff6b6b"></uni-icons>
        <text>截止时间：{{ exam.deadline }}</text>
      </view>
    </view>
    
    <view class="exam-footer">
      <view class="exam-participants">
        <text>{{ exam.participants || 0 }}人已参加</text>
      </view>
      <button 
        class="exam-btn" 
        :class="buttonClass"
        @tap.stop="handleAction"
      >
        {{ buttonText }}
      </button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ExamCard',
  props: {
    exam: {
      type: Object,
      required: true
    }
  },
  computed: {
    statusClass() {
      const statusMap = {
        'not_started': 'status-pending',
        'in_progress': 'status-active',
        'ended': 'status-ended',
        'graded': 'status-completed'
      }
      return statusMap[this.exam.status] || 'status-pending'
    },
    buttonText() {
      const textMap = {
        'not_started': '立即报名',
        'in_progress': '开始考试',
        'ended': '查看成绩',
        'graded': '查看成绩'
      }
      return textMap[this.exam.status] || '立即报名'
    },
    buttonClass() {
      const classMap = {
        'not_started': 'btn-primary',
        'in_progress': 'btn-success',
        'ended': 'btn-info',
        'graded': 'btn-info'
      }
      return classMap[this.exam.status] || 'btn-primary'
    }
  },
  methods: {
    goToDetail() {
      uni.navigateTo({
        url: `/pages/exams/detail?id=${this.exam.id}`
      })
    },
    handleAction() {
      const actionMap = {
        'not_started': this.enrollExam,
        'in_progress': this.startExam,
        'ended': this.viewResult,
        'graded': this.viewResult
      }
      const action = actionMap[this.exam.status]
      if (action) action()
    },
    enrollExam() {
      uni.showModal({
        title: '确认报名',
        content: `确定要报名参加